<template>
    <div class="morning">
              <p>
                <span>{{title}}</span>
                <el-switch
                  v-model="isCheck"
                  active-color="#fff"
                  inactive-color="#ccc"
                  active-text="接诊"
                  inactive-text="休息"
                  @change="changeBan"
                >
                </el-switch>
              </p>
              <p>
                <el-time-select
                placeholder="起始时间"
                v-model="startTime"
                :disabled="value"
                :picker-options="startoptions"
              >
              </el-time-select>
              <el-time-select
                placeholder="结束时间"
                :disabled="value"
                v-model="endTime"
                :picker-options="endoptions"
              >
              </el-time-select>
              <input class="hysbtn" :disabled="value" type="text"  placeholder="请输入号源数" >
              </p>
              
    </div>
</template>

<script>
export default {
    props: {
        defaultValue: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '上午'
        },
        startoptions: {
            type: Object,
            default: function () {
                return {
                    start: '08:00',
                    step: '00:15',
                    end: '12:00',
                }
            }
        },
        endoptions: {
            type: Object,
            default: function () {
                return {
                    start: '08:00',
                    step: '00:15',
                    end: '12:00',
                }
            }
        },
        
        
    },
    data() {
        return {
            value: this.defaultValue,
            isCheck: '',
            startTime: '',
            endTime: ''
        }
    },
    methods: {
        changeBan(){//滑块决定是否禁用排版时间
            this.value=!this.value
        }
    }

}
</script>

<style lang="scss" scoped>
.hysbtn{
    width: 160px;
    height: 40px;
    border: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    box-sizing: border-box;
    text-indent: 2rem;
    }
.morning {
    padding-top: 20px;
    
    p:nth-of-type(1) {
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    p {
    padding-bottom: 14px;
    font-size: 14px;
    font-weight: lighter;
    }
}
</style>